import React from 'react';
import { Table, Tag, Typography } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined, SyncOutlined, MinusCircleOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import type { TaskRecord } from '../../types';
import { TASK_TYPE_LABELS } from '../../types';

const { Text } = Typography;

interface TaskRecordTableProps {
  data: TaskRecord[];
  loading?: boolean;
}

const TaskRecordTable: React.FC<TaskRecordTableProps> = ({ data, loading = false }) => {
  
  // 获取状态图标和颜色
  const getStatusConfig = (status: string) => {
    switch (status.toUpperCase()) {
      case 'SUCCESS':
        return { icon: <CheckCircleOutlined />, color: 'success', text: '成功' };
      case 'FAILED':
        return { icon: <CloseCircleOutlined />, color: 'error', text: '失败' };
      case 'RUNNING':
        return { icon: <SyncOutlined spin />, color: 'processing', text: '运行中' };
      case 'SKIPPED':
        return { icon: <MinusCircleOutlined />, color: 'default', text: '跳过' };
      default:
        return { icon: <MinusCircleOutlined />, color: 'default', text: status };
    }
  };

  // 计算耗时
  const calculateDuration = (startTime: string, endTime?: string) => {
    if (!endTime) return '-';
    
    const start = dayjs(startTime);
    const end = dayjs(endTime);
    const duration = end.diff(start, 'second');
    
    if (duration < 60) return `${duration}秒`;
    if (duration < 3600) return `${Math.floor(duration / 60)}分${duration % 60}秒`;
    
    const hours = Math.floor(duration / 3600);
    const minutes = Math.floor((duration % 3600) / 60);
    const seconds = duration % 60;
    return `${hours}时${minutes}分${seconds}秒`;
  };

  const columns = [
    {
      title: '任务类型',
      dataIndex: 'taskType',
      key: 'taskType',
      width: 120,
      render: (taskType: string) => {
        const label = TASK_TYPE_LABELS[taskType as keyof typeof TASK_TYPE_LABELS] || taskType;
        return (
          <Tag color="blue">
            {label}
          </Tag>
        );
      }
    },
    {
      title: '状态',
      dataIndex: 'taskStatus',
      key: 'taskStatus',
      width: 100,
      render: (status: string) => {
        const config = getStatusConfig(status);
        return (
          <Tag icon={config.icon} color={config.color}>
            {config.text}
          </Tag>
        );
      }
    },
    {
      title: '开始时间',
      dataIndex: 'taskStartTime',
      key: 'taskStartTime',
      width: 160,
      render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '结束时间',
      dataIndex: 'taskEndTime',
      key: 'taskEndTime',
      width: 160,
      render: (time?: string) => time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '-'
    },
    {
      title: '耗时',
      key: 'duration',
      width: 100,
      render: (_: any, record: TaskRecord) => calculateDuration(record.taskStartTime, record.taskEndTime)
    },
    {
      title: '执行结果',
      dataIndex: 'taskResult',
      key: 'taskResult',
      render: (result?: string) => {
        if (!result) return '-';
        
        return (
          <Text 
            ellipsis={{ 
              tooltip: result
            }}
            style={{ width: 200 }}
          >
            {result}
          </Text>
        );
      }
    }
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      loading={loading}
      rowKey="taskId"
      pagination={false}
      size="small"
      scroll={{ x: 800 }}
      style={{ marginTop: 16 }}
    />
  );
};

export default TaskRecordTable;